<template>
  <div>
    <HeaderDe></HeaderDe>
    <div>
      <h3 style="text-align: center">多熠电商-需求管理</h3>
      <LwBordor></LwBordor>
    </div>

    <el-form :model="gongshiForm" ref="gongshiForm" size="medium" class="demo-dynamic" style="text-align: center;">
      <el-form-item>
        <el-button type="primary" class="el-button--lw_add" size="small" @click="refreshGongShi()">刷新</el-button>
      </el-form-item>
    </el-form>

    <el-table
        v-loading="loading"
        :data="tableData"
        stripe
        class="m-table" :header-cell-style="{textAlign:'center',background: '#07a023' ,color:'#1d1d1d'}"
        :cell-style="{textAlign:'center'}"
        border>
      <el-table-column
          fixed
          prop="date"
          label="时间"
          width="300"
      >
      </el-table-column>
      <el-table-column
          prop="name"
          label="需求"
          width="458"
      >
      </el-table-column>
      <el-table-column
          prop="hour"
          label="工时"
          width="100"
      >
      </el-table-column>
      <el-table-column
          prop="is_complete"
          label="状态"
          width="100"
      >
      </el-table-column>
    </el-table>

    <el-form size="medium" class="demo-dynamic" style="text-align: center;margin-top: 20px">
      <el-form-item>
        <el-button class="el-button--lw_submit" size="small" @click="addGongShi()">新增</el-button>
        <!--        <el-button class="el-button&#45;&#45;lw_submit" size="small" @click.prevent="submitGongShi(gongshiForm)">提交-->
        <!--        </el-button>-->
      </el-form-item>
    </el-form>

    <el-dialog title="新增需求" :visible.sync="isShow" v-if="isShow">
      <el-form ref="requireForm" :model="requireForm" style="text-align: center;" :inline="true">
        <el-form-item label="日期">
          <el-date-picker
              v-model="requireForm.date"
              type="date"
              placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <br>
        <el-form-item label="需求内容" prop="platformOrderSn">
          <el-input v-model="requireForm.name" placeholder="需求内容" style="width: 280px;" clearable
                    transfer></el-input>
        </el-form-item>
        <br>
        <el-form-item label="工时" prop="platformOrderSn">
          <el-input v-model="requireForm.hour" placeholder="工时" style="width: 280px;" clearable
                    transfer></el-input>
        </el-form-item>
        <br>
        <el-form-item>
          <el-button class="el-button--lw_submit" size="small" @click.prevent="onSubmit(requireForm)">提交
          </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>

</template>

<script>
import LwBordor from "@/views/lw/LwBordor";
import {Loading} from 'element-ui';
import HeaderDe from "../../components/HeaderDe";
import DateRange from "@/views/lw/DateRange.vue";
import {getDateStr, timeChina} from "@/dateutil";
import JsonViewer from "vue-json-viewer";
import dateFix from "@/views/lw/DateFix.vue";


export default {
  components: {
    JsonViewer,
    DateRange,
    LwBordor,
    HeaderDe
  },
  data() {
    return {
      requireForm: {
        date: '',
        name: '',
        hour: '',
      },
      tableData: [],
      gongshiForm: {},
      // ③ 按钮动画
      loading: false,
      isShow: false
    };
  },
  methods: {
    refreshGongShi() {
      const _this = this
      // Loading.service({target: document.body});
      this.$http_php.get("/de_gongshi.php").then(res => {
        // let loadingInstance = Loading.service({target: document.body});
        // this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
        //   loadingInstance.close();
        // });
        if (res.data.code === 0) {
          console.log(res.data, "res.data")
          console.log(res.data.data.GongShi, "res.data.GongShi")


          _this.tableData = [];

          let data = res.data.data.GongShi;
          console.log("data", data)
          for (let i in data) {
            console.log(i, data[i]);
            let row = []
            row['date'] = data[i].date
            row['name'] = data[i].name
            row['hour'] = data[i].hour
            row['is_complete'] = data[i].is_complete === true ? <span style="color:green">已结清</span> :
                <span style="color:red">未结清</span>;
            _this.tableData.push(row)
          }
          console.log("lwllwlwl")
          console.log(_this.tableData)


          // console.log(this.tableDatas, "lwData")
        } else {
          _this.$alert('操作失败:' + JSON.stringify(res.data), '提示', {
            confirmButtonText: '确定',
            callback: action => {
              // _this.$router.push("/blogs")
            }
          });
        }
      })
    },
    exportGongShi() {
      // ② 全局+字
      // const loading = this.$loading({
      //     lock: true,
      //     text: '正在导出',
      //     spinner: "el-icon-loading",
      //     background: 'raba(0, 0, 0, 0.7)'
      // });
      // ③ 按钮动画
      // this.loading.listloading = true;
      this.$message({
        type: "warning",
        message: "数据正在导出，请耐心等待"
      });

      //!important 如果要在下面的函数中用结构体this 必须先把this赋予变量 结构体中调用_this!!!!
      const _this = this

      this.$http_php({
        method: 'get',
        url: "/de_gongshi.php",
        params: {"is_export": true},
        responseType: 'blob'
      }).then(function (response) {
        // ② 全局+字
        // loading.close();

        // ① 全局+转圈
        // let loadingInstance = Loading.service({target: document.body});
        // this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
        //     loadingInstance.close();
        // });
        console.log(response)
        var fileURL = window.URL.createObjectURL(new Blob([response.data]));
        var fileLink = document.createElement('a');

        fileLink.href = fileURL;
        console.log(response.headers)
        /*
       todo
        中文名乱码后端找了一下午找不到问题
        从前端找找啊啊啊啊！
        前端这里可以打印出来所有的header啊啊啊啊啊啊啊
        在这里用decodeURI一下不就可以把后端转的urlcode转为中文了吗.....
        反正前端肯定是认识urlcode的！！！！
         */
        fileLink.setAttribute('download', decodeURI(response.headers['filename']));
        document.body.appendChild(fileLink);

        fileLink.click();
        // ③ 按钮动画
        _this.loading.listloading = false;
        _this.$message({
          type: "success",
          duration: 1000,
          message: "操作成功"
        });
      })
    },
    addGongShi() {
      const _this = this
      _this.isShow = true
    },
    onSubmit(requireForm) {
      const _this = this
      // console.log(_this.tableData, "tableData")
      // console.log(requireForm, "requireForm")
      // let tableData = _this.tableData
      // requireForm.is_complete = false
      // let arr = [requireForm]
      //
      // tableData.forEach(function (v, k) {
      //   console.log(_this.arrayToObject(v), "vvvvvv")
      //   console.log(k, "kkkkkkk")
      //   //这里v是数组 需要转成对象！！！
      //   arr.push(_this.arrayToObject(v))
      // })
      requireForm.is_complete = false
      console.log(requireForm, "requireForm")
      // this.$http_php.get("/de_gongshi.php", {
      //   params: {
      //     GongShi: requireForm
      //   }
      // })
      this.$http_php({
        method: 'get',
        url: "/de_gongshi.php",
        // headers :{
        //   'Access-Control-Max-Age': '3600'
        // },
        params: {"GongShi": requireForm}
      }).then(res => {
        if (res.data.code === 0) {
          _this.$alert('操作成功', '提示', {
            confirmButtonText: '确定',
            callback: action => {
              _this.isShow = false
              // _this.$router.push("/blogs")
            }
          });
          this.refreshGongShi();
        } else {
          _this.$alert('操作失败:' + JSON.stringify(res.data), '提示', {
            confirmButtonText: '确定',
            callback: action => {
              // _this.$router.push("/blogs")
            }
          });
        }
      })
    },
    arrayToObject(arr) {
      // console.log(arr, "乐乐乐乐")
      //  let obj = arr.reduce((obj, item, index) => {
      //    console.log(item,"itemitemitem")
      //    console.log(index,"indexindexindex")
      //   obj[index] = item;
      //   return obj;
      // }, {});
      let obj = {};
      arr.forEach((v, k) => {
        console.log(v, "vvv")
        console.log(k, "kkk")
        obj.k = v
      })
      console.log(obj, "objobj")
      return obj;
    }
  },
  created() {
    this.refreshGongShi();
  }
}
</script>

<style scoped>
.lw_boder {
  box-shadow: 0 2px 2px rgba(0, 0, 0, .50), 0 0 6px rgba(0, 0, 0, .50);
  border-radius: 2px;
  /*border-top:3px solid #0e87e3;*/
  border-bottom: 3px solid #0e87e3;
  /*border-top: 3px solid #0e87e3;*/
  /*border-left: ;*/

}

.el-button--lw-test {
  box-shadow: 0 3px 3px rgba(0, 0, 0, .50), 0 0 6px rgba(0, 0, 0, .50);
  border-radius: 3px;
  /*border-top:3px solid #0e87e3;*/
  border: 2px solid #4cae4c;
  background: #4cae4c;
  active: #4cae4c;
  /*border-top: 3px solid #0e87e3;*/
  /*border-left: ;*/

}

.el-button--lw.is-active,
.el-button--lw:active {
  background: #20B2AA;
  border-color: #20B2AA;
  color: #fff;
}

.el-button--lw-new-diaodu {
  color: #FFF;
  background-color: #e50404;
  border-color: #e50404;
  box-shadow: 0 3px 3px rgba(0, 0, 0, .50), 0 0 6px rgba(0, 0, 0, .50);
  border-radius: 3px;
}

.el-button--lw-new-diaodu:focus,
.el-button--lw-new-diaodu:hover {
  background: #e307c6;
  border-color: #e307c6;
  color: #fff;
}

.el-button--lw:focus,
.el-button--lw:hover {
  background: #48D1CC;
  border-color: #48D1CC;
  color: #fff;
}

.el-button--lw {
  color: #FFF;
  background-color: #20B2AA;
  border-color: #20B2AA;
  box-shadow: 0 3px 3px rgba(0, 0, 0, .50), 0 0 6px rgba(0, 0, 0, .50);
  border-radius: 3px;
}

.el-button--lw_add {
  color: #FFF;
  background-color: #5688c4;
  border-color: #5688c4;
  box-shadow: 0 3px 3px rgba(0, 0, 0, .50), 0 0 6px rgba(0, 0, 0, .50);
  border-radius: 3px;
}

.el-button--lw_add:focus,
.el-button--lw_add:hover {
  background: #114c92;
  border-color: #114c92;
  color: #fff;
}

.el-button--lw_submit {
  color: #FFF;
  background-color: #c1a51a;
  border-color: #c1a51a;
  box-shadow: 0 3px 3px rgba(0, 0, 0, .50), 0 0 6px rgba(0, 0, 0, .50);
  border-radius: 3px;
}

.el-button--lw_submit:focus,
.el-button--lw_submit:hover {
  background: #969508;
  border-color: #969508;
  color: #fff;
}


.m-content {
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
  border: 2px solid #fff;
}

.lw {
  background: transparent;

  border-radius: 15px;

  border: 0px;

}

/*.maction {*/
/*  margin: 10px 0;*/
/*}*/
.el-form-item__label-lw {
  text-align: justify;
  text-align-last: justify;
  margin-left: 300px;
  size: 300px;
}
</style>

